<template>
    <div class="card-white-wrapper" @click="onCardClick">
        <div class="card-user-wrapper" style="flex-direction: row">
            <image v-if="itemValue.ex.image" :src="itemValue.ex.image" class="product-img"></image>
            <div class="content-box">
                <text class="content-title">{{itemValue.ex.title}}</text>
                <div class="content-bottom">
                    <text class="content-tag">{{itemValue.ex.tag}}</text>
                    <text class="icon-text" :style="{fontFamily: 'wxcIconFont'}">{{icon3 + itemValue.ex.view_count}}</text>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
    export default {
        name: "repository-item",
        props: {
            defaultIcon: {type: String, default: '\ue617 '},
            itemValue: {
                type: Object, default: () => {
                    return {ex:{}}
                }
            },
            itemIndex: {type: Number, default: -1},
            onItemClick:{type:Function}
        },

        computed: {
            icon3() {
                return  this.defaultIcon
            },
        },
        components: {},
        methods: {
            onCardClick() {
                this.onItemClick && this.onItemClick(this.itemIndex);
            },
            imageClick() {
                if(!this.itemValue.ex.userName) {
                    return
                }
                this.jumpWithParams("UserInfoPage", {userName: this.itemValue.ex.userName})
            }
        },
        created() {
        },
    }
</script>

<style lang="sass" > @import '../../config/styles.scss'</style>
<style scoped>
    @import '../../config/styles.scss';
    .card-white-wrapper{

    }
    .product-img {
        width: 216px;
        height: 154px;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
    }


    .card-user-wrapper {
        align-items: center;
        margin-bottom: 15px;
    }

    .content-box {
        width:400px;
        height:155px;
       /*flex-direction: row;*/
    }
    .content-title{
        height:35px;
        font-size:30px;
        width:358px;
        overflow: hidden;
        color:#434A54
    }
    .content-bottom{
        width:400px;
        height:120px;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
    .icon-text{
        color:#999999;
        font-size:24px;
    }
    .content-tag{
        border-radius:16px;
        height:45px;
        font-size:24px;
        padding:7px;
        color:#999999;
        border-width:1px;
        border-style: solid;
        border-color: #999999;
    }
</style>
